<template>
  <div class="nav">
    <!-- 大图 -->
    <div class="big">
      <ul>
        <li><img src="../assets/img/big-1.png" alt="" /><span>火车票</span></li>
        <li><img src="../assets/img/big-2.png" alt="" /><span>机票</span></li>
        <li>
          <img src="../assets/img/big-3.png" alt="" /><span>酒店住宿</span>
        </li>
        <li>
          <img src="../assets/img/big-4.png" alt="" /><span>景点门票</span>
        </li>
      </ul>
    </div>

    <!-- 小图 -->
    <div class="small">
      <ul>
        
          <li>
            <img src="../assets/img/small-1.png" alt="" /><span>汽车·船票</span>
          </li>
          <li>
            <img src="../assets/img/small-2.png" alt="" /><span>打车出行</span>
          </li>
          <li>
            <img src="../assets/img/small-3.png" alt="" /><span>周边跟团</span>
          </li>
          <li>
            <img src="../assets/img/small-4.png" alt="" /><span>境内游</span>
          </li>
          <li>
            <img src="../assets/img/small-5.png" alt="" /><span>游轮</span>
          </li>
        
          <li>
            <img src="../assets/img/small-6.png" alt="" /><span>出境游</span>
          </li>
          <li>
            <img src="../assets/img/small-7.png" alt="" /><span>海外玩乐</span>
          </li>
          <li>
            <img src="../assets/img/small-8.png" alt="" /><span>签证</span>
          </li>
          <li>
            <img src="../assets/img/small-9.png" alt="" /><span>全球WiFi</span>
          </li>
          <li>
            <img src="../assets/img/small-10.png" alt="" /><span>全部分类</span>
          </li>
        
      </ul>
    </div>
  </div>
</template>



<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 267px;
  //   background: orangered;
  padding-top: 18px;
  .big {
    width: 345px;
    height: 98px;
    // background: chartreuse;
    // display: flex;
    // margin-top: 18px;
    margin-left: 15px;
    margin-right: 15px;

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;

      li {
        width: 86px;
        height: 81px;
        // display: inline-block;
        display: flex;
        flex-direction: column;
        // align-content: center;
        // text-align: center;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        img {
          width: 50px;
          height: 50px;
          display: block;
        }
        span {
          width: 86px;
          height: 21px;
          font-size: 14px;
          color: #333333;
          flex-wrap: nowrap;
        }
      }
    }
  }

    .small{
      padding:15px 10px 0;
      box-sizing: border-box;
      width:100%;
      li{  
        width:20%;
        height:55px;
        text-align: center;
        float:left;  
        margin-bottom: 17px;
        img{
          display: block;
          width:30px;
          height:30px;
          margin-left:19px;
        
        }
        span{
          font-size: 12px;
          color:#333333;
          text-align: center;
        }
      }
    }
  }

</style>
